<!--医院详情-->
<template>
  <div class="hospital">
    <!-- 左侧导航 -->
    <div class="menu">
      <div class="top">
        <svg t="1694362758663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="53142" width="20" height="20"><path d="M902.268 514.39L511.236 216.342 120.203 514.39l-56.166-73.688L511.236 99.843l447.198 340.859z" fill="#F45656" p-id="53143"></path><path d="M513.985 329.359L192 565.269v267.735C192 862.683 216.589 887 246.268 887H413V623h195v264h168.93c29.679 0 53.07-24.317 53.07-53.996V565.269l-316.015-235.91z" fill="#BDCCD4" p-id="53144"></path></svg>
        <span>&nbsp;/&nbsp;医院详情</span>
      </div>
      <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
      >
        <el-menu-item index="/hospital/register" v-on:click="changeActive('/hospital/register')" >
          <svg t="1694360661151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14432" width="16" height="16"><path d="M853.333333 960H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V213.333333a85.333333 85.333333 0 0 1 85.333334-85.333333h85.333333V96a32 32 0 0 1 64 0V128h85.333333V96a32 32 0 0 1 64 0V128h85.333334V96a32 32 0 0 1 64 0V128h85.333333V96a32 32 0 0 1 64 0V128h85.333333a85.333333 85.333333 0 0 1 85.333334 85.333333v661.333334a85.333333 85.333333 0 0 1-85.333334 85.333333zM192 896h640a42.666667 42.666667 0 0 0 42.666667-42.666667V426.666667H149.333333v426.666666a42.666667 42.666667 0 0 0 42.666667 42.666667zM832 192h-64v32a32 32 0 0 1-64 0V192h-85.333333v32a32 32 0 0 1-64 0V192h-85.333334v32a32 32 0 0 1-64 0V192h-85.333333v32a32 32 0 0 1-64 0V192H192a42.666667 42.666667 0 0 0-42.666667 42.666667v128h725.333334v-128a42.666667 42.666667 0 0 0-42.666667-42.666667z" fill="#5C8EF3" p-id="14433"></path><path d="M576 821.333333c-70.698667 0-128-71.637333-128-160s57.301333-160 128-160 128 71.637333 128 160-57.301333 160-128 160z m0-256c-35.349333 0-64 42.986667-64 96s28.650667 96 64 96 64-42.986667 64-96-28.650667-96-64-96zM373.333333 832a32 32 0 0 1-32-32v-277.333333a32 32 0 0 1 64 0v277.333333a32 32 0 0 1-32 32z" fill="#EB9E52" p-id="14434"></path></svg>
          <span>预约挂号</span>
        </el-menu-item>
        <el-menu-item index="/hospital/detail" v-on:click="changeActive('/hospital/detail')" >
          <svg t="1694361038497" class="icon" viewBox="0 0 1024 1024" version="1.1" detail="http://www.w3.org/2000/svg" p-id="26244" width="16" height="16"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FFA000" p-id="26245"></path><path d="M204.8 512m-102.4 0a102.4 102.4 0 1 0 204.8 0 102.4 102.4 0 1 0-204.8 0Z" fill="#FFFFFF" p-id="26246"></path><path d="M512 512m-102.4 0a102.4 102.4 0 1 0 204.8 0 102.4 102.4 0 1 0-204.8 0Z" fill="#FFFFFF" p-id="26247"></path><path d="M819.2 512m-102.4 0a102.4 102.4 0 1 0 204.8 0 102.4 102.4 0 1 0-204.8 0Z" fill="#FFFFFF" p-id="26248"></path></svg>
          <span>医院详情</span>
        </el-menu-item>
        <el-menu-item index="/hospital/notice" v-on:click="changeActive('/hospital/notice')" >
          <svg t="1694360832902" class="icon" viewBox="0 0 1058 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20179" width="16" height="16"><path d="M341.333333 853.333333v-238.933333h68.266667v170.666667l375.466667 136.533333v-170.666667h68.266666v273.066667zM238.933333 307.2h68.266667v170.666667H238.933333V307.2z" fill="#FF5A06" p-id="20180"></path><path d="M307.2 637.166933v-17.066666A204.8 204.8 0 1 1 307.2 267.298133v-17.066666L1058.133333 0v887.466667zM989.866667 102.4L307.2 341.333333a126.293333 126.293333 0 0 0-102.4-34.133333 136.533333 136.533333 0 0 0 0 273.066667 126.293333 126.293333 0 0 0 102.4-34.133334l682.666667 238.933334V102.4z" fill="#1E59E4" p-id="20181"></path></svg>
          <span>预约通知</span>
        </el-menu-item>
        <el-menu-item index="/hospital/close" v-on:click="changeActive('/hospital/close')" >
          <svg t="1694360916140" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21294" width="16" height="16"><path d="M736 768h-448a32 32 0 0 1 0-64h448a32 32 0 0 1 0 64z m-44.8-415.552l-147.669333-147.669333a61.994667 61.994667 0 0 1-62.848 0l-147.669334 147.669333a32.554667 32.554667 0 0 1-46.037333-46.037333l161.578667-161.578667a63.68 63.68 0 0 1 127.104 0l161.578666 161.578667a32.554667 32.554667 0 0 1-46.037333 46.037333zM565.333333 512a32 32 0 0 1 0 64h-277.333333a32 32 0 0 1 0-64h277.333333z" fill="#EB9E52" p-id="21295"></path><path d="M853.333333 981.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V384a85.333333 85.333333 0 0 1 85.333334-85.333333h682.666666a85.333333 85.333333 0 0 1 85.333334 85.333333v512a85.333333 85.333333 0 0 1-85.333334 85.333333z m21.333334-576a42.666667 42.666667 0 0 0-42.666667-42.666666H192a42.666667 42.666667 0 0 0-42.666667 42.666666v469.333334a42.666667 42.666667 0 0 0 42.666667 42.666666h640a42.666667 42.666667 0 0 0 42.666667-42.666666V405.333333z" fill="#5C8EF3" p-id="21296"></path></svg>
          <span>停诊信息</span>
        </el-menu-item>
        <el-menu-item index="/hospital/search" v-on:click="changeActive('/hospital/search')" >
          <svg t="1694361163823" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33693" width="16" height="16"><path d="M1024 544c0 265.12-214.944 480-480 480h-64C214.912 1024 0 809.12 0 544v-64C0 214.912 214.912 0 480 0h64c265.056 0 480 214.912 480 480v64z" fill="#FF4D4D" p-id="33694"></path><path d="M511.904 896c-3.424 0-7.04-0.736-10.336-1.824-181.12-68.832-300.448-244.896-296.768-438.432V291.424a29.44 29.44 0 0 1 20.736-28.128 978.56 978.56 0 0 0 269.792-130.112 29.44 29.44 0 0 1 33.312 0 978.496 978.496 0 0 0 269.824 130.048 29.216 29.216 0 0 1 20.768 28.128v164.672c3.744 193.024-115.52 369.312-296.608 437.888a31.04 31.04 0 0 1-10.72 2.08z" fill="#FFFFFF" p-id="33695"></path><path d="M726.624 756.32l-75.68-75.904a166.624 166.624 0 0 0-16.864-215.744 166.08 166.08 0 0 0-117.6-48.736 166.464 166.464 0 0 0 0 332.864 165.184 165.184 0 0 0 98.368-32.256l75.488 75.904c5.056 5.12 11.552 7.488 18.24 7.488a25.984 25.984 0 0 0 18.048-7.2 25.824 25.824 0 0 0 0-36.416z m-210.176-58.816a114.816 114.816 0 0 1-115.232-115.392 115.04 115.04 0 0 1 115.232-114.912c30.72 0 59.552 12 81.472 33.6 21.76 21.76 33.6 50.72 33.6 81.312a114.56 114.56 0 0 1-33.6 81.792 115.328 115.328 0 0 1-81.472 33.6z" fill="#FF4D4D" p-id="33696"></path></svg>
          <span>查询/取消</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 右侧内容展示区域:路由组件出口 -->
    <div class="content">
      <!-- 子组件展示结构的出口 -->
      <router-view></router-view>
    </div>

  </div>
</template>

<script setup lang="ts">
// 左侧菜单栏图标
import {useRoute,useRouter} from "vue-router";
// 引入Pinia请求数据
import useDetailStore from "@/store/modules/hospitalDetail.ts";
import {onMounted} from "vue";
// 获取仓库对象
let detailStore = useDetailStore();
// 获取路由器
let $router = useRouter();
// 获取当前路由信息
let $route = useRoute();
// 左侧菜单点击事件路由转跳回调
const changeActive = (path:string) =>{
  // 转跳到对应的二级路由
  $router.push({path,query:{hoscode:$route.query.hoscode}});
}

//组件挂载完毕通知后Pinia仓库发请求获取医院详情数据并存储
onMounted(()=>{
  // 获取医院详情的数据
  detailStore.getHospital($route.query.hoscode as string);
  // 获取医院科室的数据
  detailStore.getDepartment($route.query.hoscode as string);
});

</script>

<style scoped lang="scss">
.hospital {
  display: flex;
  .menu {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    .top {
      color: #7f7f7f;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    .el-menu-item{
      display: flex;
      align-items: center;
      span{
        margin-left: 5px;
      }
    }
  }
  .content {
    flex: 8;
  }
}
</style>
